<template>
	<view class="body">
		<image :src="$IMG_URL('/static/newVersion/conversionBg.png')"   mode="aspectFill" class="bg"></image>
		<view class="conversion_box">
			<view class="input_box">
				<u-input v-model="cdkey" type="text" :border="false" class="input" input-align="center"
					placeholder-style="fontSize: 32rpx;color: #999999;fontWeight: 500," :custom-style="customStyle" placeholder="请输入兑换码" :clearable="false"/>
			</view>
			<view class="btn" :style="{opacity:cdkey?'1':'0.5'}" @click="getOperate">
				确认兑换
			</view>
		</view>
		<view class="button" @click="routeHistory">
			<text class="size">兑换记录</text>
			<u-icon name="arrow-right"  color="#999999" size="14"></u-icon>
		</view>
		<Qcode :WechatCodeShow="codeShow"  :title="status?'兑换成功':'兑换失败'" :status="status" :form="form"
			:content="content" :btn="form == 'card'?'前往卡包':'前往课程'" @close="close" @sure="coseSure"></Qcode>
	</view>
</template>

<script>
	import Qcode from './components/Qcode.vue'
	import{
		operate
	} from '@/api/user.js'
	export default {
		components: {
			Qcode
		},
		data() {
			return {
				codeShow:false,
				cdkey: '',
				customStyle:{
					fontWeight: 700,
					fontSize: '32rpx'
				},
				status:0,
				content:'',
				form:''
			}
		},
		methods: {
			getOperate(){
				if(!this.cdkey){
					uni.showToast({
						title:'请输入兑换码',
						icon:'none'
					})
				}else{
					operate({
						cdkey:this.cdkey
					}).then(({data:res})=>{
						if(res.code == 1){
							this.status = res.data.status
							this.content = res.data.describe
							this.form = res.data.form
							this.codeShow = true
						}
					})
				}
				
			},
			routeHistory(){
				uni.navigateTo({
					url:'CDKEYHistory'
				})
			},
			close() {
				this.codeShow = false
			},
			coseSure() {
				if(this.form == 'card'){
					uni.navigateTo({
						url:'cardBag'
					})
				}else if(this.form == 'course'){
					uni.navigateTo({
						url:'course'
					})
				}
				this.codeShow = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bg {
			width: 750rpx;
			height: 274rpx;
		}

		.conversion_box {
			margin-top: -42rpx;
			z-index: 9;
			width: 702rpx;
			height: 256rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
			display: flex;
			flex-direction: column;
			align-items: center;

			.input_box {
				margin: 24rpx 0;
				width: 654rpx;
				height: 92rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.input {
					width: 100%;

				}

				
			}
			
			.btn {
				width: 654rpx;
				height: 92rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
			}
		}
		
		.button{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 32rpx;
			.size{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #999999;
				margin-right: 11rpx;
			}
		}
	}
</style>